<script>
/**
 * 进度仪表盘
 */
import * as echarts from "echarts";
import dingtheme from "../theme/dingTheme.json"
import macarons from "../theme/macarons.json"

/**
 * 进度条
 */
export default {
  name: "progress-chart",

  props: {
    // 进度值
    value: {
      type: Number,
      default: () => {
        return 0
      }
    },

    // 样式
    itemStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    const option = {
      series: [{
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            // borderWidth: 1,
            // borderColor: '#464646'
          }
        },
        // 进度条宽度
        axisLine: {
          lineStyle: {
            width: 20
          }
        },
        // 分割线
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: [
          {
            value: 0,
            detail: {
              offsetCenter: ['0%', '0%']
            }
          }
        ],
        detail: {
          // width: 50,
          // height: 14,
          fontSize: 20,
          // color: 'auto',
          // borderColor: 'auto',
          // borderRadius: 20,
          // borderWidth: 1,
          formatter: '{value}%'
        }
      }]
    }
    return {
      option,
    }
  },

  mounted() {

  },

  methods: {
    init() {
      echarts.registerTheme('dingtheme', dingtheme.theme)
      echarts.registerTheme('macarons', macarons.theme)
      this.$refs.progressChart.init(echarts, 'dingtheme', (chart) => {
        chart.setOption(this.creatOptions())
        this.$emit('finished')
      })
    },

    creatOptions() {
      this.option.series[0].pointer.show = false;
      this.option.series[0].data[0].value = this.value
      this.option.series[0].progress.itemStyle = this.itemStyle
      return this.option
    },

    refreshOptions() {
      console.log(this.creatOptions().series[0].data[0].value)
      this.$refs.progressChart.setOption(this.creatOptions())
    }

  },
}
</script>

<template>
  <view class="line-chart">
    <l-echart ref="progressChart" @finished="init"/>
  </view>
</template>

<style scoped lang="scss">

</style>